<template>
 <el-container class="app-container">
      <el-header>
      <el-row>
          <el-col :span="12">
            <span class="logo a " v-if="!isCollapse" >h</span>
            <span class="logo-close a" v-else>hhh</span>
            <span class="collapse-icon" @click="isCollapse=!isCollapse"  >
              <i class="el-icon-s-fold" v-if="isCollapse"></i>
            <i class="el-icon-s-unfold " v-else ></i>
            </span>
          </el-col>
          <el-col :span="12" class="header-user">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px;color:#FFf;"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>新增</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span>王小虎</span> 
            </el-col>
      </el-row>
      </el-header>
     <el-container> 
    <el-aside class="menu-aside" style="width:auto; ">
      <el-menu
        :router="true"
        :default-active="activeIndex"
          :default-openeds="defaultOpeneds"
        class="el-menu-vertical-demo"
          :unique-opened="true"
          @select="handleSelect"
          :collapse="isCollapse">
        <el-submenu index="1">
          <template slot="title">
          <i class="el-icon-message"></i><span slot="title">导航一</span></template>
          <el-menu-item-group>
             <el-menu-item index="/">选项1</el-menu-item> 
             <el-menu-item index="bb">选项2</el-menu-item> 
             <el-menu-item index="cc">选项3</el-menu-item> 
             <el-menu-item index="dd">选项3</el-menu-item> 
            </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-message"></i><span slot="title">导航er</span></template>
          <el-menu-item-group>
              <el-menu-item index="2-1">选项1</el-menu-item> 
              <el-menu-item index="2-2">选项2</el-menu-item> 
              <el-menu-item index="2-3">选项3</el-menu-item> 
            </el-menu-item-group>
        </el-submenu>
      </el-menu>
      </el-aside>
      <el-main style="background-color:rgb(238, 241, 246);">
        <el-container style="margin-bottom:20px;"> 
          <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/system/index/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/system/index/">活动管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>活动列表11</el-breadcrumb-item>
        </el-breadcrumb>
      </el-container> 
      
    <!--   <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name" 
          :value="item.index">
          {{item.content}}
        </el-tab-pane>
    </el-tabs> -->

        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
        
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
          const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          };
          return {
          activeIndex:"bb",
          editableTabsValue: '2',
            editableTabs: [{
               title: '首页',
               name: '0',
               content: 'Tab 1 content',
               index:0
            }],
            tabIndex: 1,
            tableData: Array(10).fill(item),
            isCollapse: false,
            defaultOpeneds:['1']
          }
        },
        methods: {
            handleSelect(index, indexPath) {
                console.log( index );
               
            }
        },created: function () {
            
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

   
   .el-header {
    background-color: #17b3a3;
   color:#fff;
    line-height: 60px;
  }
  .el-submenu .el-menu-item{min-width:0px;}
  .el-aside {
    color: #333;
  }
   .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
  i {
    font-size: 1.3em;
    vertical-align: middle;
 }
 .collapse-icon{
  display:inline-block; 
  padding-left:10px;
  height: 1.3em;  
  line-height: 1.3em;
 }
 .logo{
   width:160px;
   display:inline-block;
   margin-right:20px;
 }
 .logo-close{
  width:45px;
  display:inline-block;
 }
 .a{
   transition: width 0.3s ease-in-out;
 }
 .app-container{
  height:100%;
    border: 1px solid #eee
 }
 .header-user{
  text-align: right;
  font-size: 12px;
  color:#FFf;
 }
 
 a{
  text-decoration: none;
 }
 
</style>
